<template>
  <div class="satisfaction">
    <div class="title">{{$t('config.channel.satisfactionTips')}}</div>
    <configCompositionTwoWindowStyle :height="210">
      <template slot="card">
        <div v-loading="tableLoading">
          <search
            :inputTitle="$t('config.channel.satisfactionSear')"
            @add="addSatisfaction"
            @refresh="refresh"
            :isShowInput="isShowInput"
            :isReloadIvr="false"
            :showAdvSearch="false"
            :hidePage = "hidePage">
          </search>
          <diyTable :tableHeader="tableHeader" :tableData="tableData" @updata="updata" @del="del"></diyTable>
        </div>
      </template>
      <template slot="detail">
        <BreadCrumbConfig v-if="isShowAddOrEdit" :titleArr="titleArr" @back="cancle"></BreadCrumbConfig>
        <div>
          <add-satisfaction
            v-if="isShowAddOrEdit"
            :satisfyInfo="satisfyInfo" :dataList = "dataList" @refresh="refresh"></add-satisfaction>
        </div>
      </template>
    </configCompositionTwoWindowStyle>
  </div>
</template>
<script>
  import configCompositionTwoWindowStyle from '../../../../ui-modules/config/configCompositionTwoWindowStyle'
  import search from '../base/search'
  import BreadCrumbConfig from '@/components/ui-modules/breadCrumb/BreadCrumbConfig'
  import diyTable from '../base/diyTable'
  import addSatisfaction from './addSatisfaction'
  import * as uuid from 'uuid'
  import {deepClone} from '@/utils/m7Utils.js'
  export default {
    data () {
      return {
        isShowInput: false,
        hidePage: true,
        dataList: {},
        tableHeader: [
          {prop: 'name', label: this.$t('config.channel.satisfactionOption')},
          {prop: '', label: this.$t('public.operate')}
        ],                        //   自定义 表头
        tableData: [],           //  表格数据
        tableLoading: false,      //   表格  loading
        isShowAddOrEdit: false,   //   右侧  新建或修改 显隐
        titleArr: ['满意度调查选项', '添加满意度调查选项'],
        inputConditionSkillName: '',
        satisfyInfo: {},
        flag: false
      }
    },
    components: {
      configCompositionTwoWindowStyle,
      search,
      BreadCrumbConfig,
      diyTable,
      addSatisfaction
    },
    methods: {
      cancle () {
        this.isShowAddOrEdit = false
      },
      addSatisfaction () {
        this.flag = false
        if (this.flag) {
          return
        }
        this.isShowAddOrEdit = true
        this.titleArr = ['满意度调查选项', '添加满意度调查选项']
        this.satisfyInfo = {
          name: '',
          options: [
            { name: '',
              options: [],
              key: uuid.v1(),
              state: '2'
            }
          ],
          key: uuid.v1(),
          state: '2'}
        this.flag = true
      },
      refresh () {
        this.search()
        this.flag = false
      },
      search () {
        this.tableLoading = true
        const arr = this.$getCache('options').filter(item => {
          return item.name === '满意度调查选项'
        })
        this.$store.dispatch('findOneAppDic', {_id: arr[0]._id}).then((resp) => {
          if (resp && resp.success) {
            this.dataList = resp.data
            this.tableData = resp.data.options
            this.tableLoading = false
            this.isShowAddOrEdit = false
          }
        })
      },
      updata (val) {
        this.isShowAddOrEdit = true
        this.titleArr = ['满意度调查选项', '修改满意度调查选项']
        this.satisfyInfo = val
      },
      del (val) {
        let data = deepClone(this.dataList)
        data.options.forEach((item, index) => {
          if (item.key === val.key) {
            data.options.splice(index, 1)
          }
        })
        this.$confirm(this.$t('config.channel.sureDel'), this.$t('public.tip'), {
          confirmButtonText: this.$t('public.confirm'),
          cancelButtonText: this.$t('public.cancel'),
          cancelButtonClass: 'primary_btn',
          confirmButtonClass: 'primary_btn',
          type: 'warning'
        }).then(() => {
          this.$store.dispatch('updateOneAppDic', data).then(res => {
            if (res.success) {
              this.isShowAddOrEdit = false
              this.refresh()
              this.$message.success(this.$t('sms.successDel'))
            } else {
              this.$message.error(this.$t('sms.failDel'))
            }
          })
        }).catch(() => {
          this.$message.info(this.$t('public.cancel'))
        })
      }
    },
    beforeMount () {
      this.search()
    }
  }
</script>
<style lang="stylus" scoped>
  @import "../../../../../assets/common.styl"
  .satisfaction
    .title
      color $c-prompt
      height 30px
      line-height 30px
      padding 3px 10px
      border-bottom 1px solid $c-border1
</style>
